<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
    <script src="js/index.js"></script>
    <style>
        a {
    color: #00B7FF;
    }
    .file {
        position: relative;
        display: inline-block;
        padding: 4px 20px;
        overflow: hidden;
    }
    .file input[type="file"]  {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    select option {
        font-size: 24px
    }
    select{
        height: 800px
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="row" style="margin-top: 100px">
            <input type="button" id="logout" class="btn btn-default" value="退出聊天室" />
            <div class="row">
                <div class="col-sm-9">

                    <div class="panel panel-default" style=" overflow-y:auto; overflow-x:auto; height:500px;">
                        <div class="panel-body" style="height: 550px" id="box">
                            <div>
                                <ul id="messages" style="list-style:none;"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <a class="file input-fileup btn btn-primary" href="javascript:;">图片/表情
                            <input type="file" id="file" name="img" accept="image/gif, image/jpeg, image/png, image/jpg">
                        </a>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" rows="5" id="msg"></textarea>
                    </div>
                    <input type="button" id="send" class="btn btn-default" value="发送消息" />
                </div>
                <div class="col-sm-3">
                    <ul class="nav nav-pills" id="pills">
                        <li class="active"><a href="#">好友列表</a></li>
                        <li><a href="#">群聊</a></li>
                    </ul>
                    <!-- 好友列表 -->
                    <div id="onlinelist"></div>
                    <!-- <ul class="list-group" id="onlinelist" style="border: #00B7FF solid 1px"></ul> -->

                    <!-- 群聊  聊天群列表 -->
                    <div class="hide" id="chats">
                        
                            <div id="chatslist">

                            </div>
                        
                        <p class="text-center">
                            <a href="#myModal" class="btn btn-default btn-lg" data-toggle="modal">
                                <span class="glyphicon glyphicon-plus"></span> 添加
                            </a>
                        </p>
                    </div>
                </div>

                <!-- 添加群聊的窗体 -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">创建群聊</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="chatroom">定义聊天群名称</label>
                                    <input type="text" class="form-control" id="chatroom" placeholder="请输入名称">
                                </div>
                                <div class="form-group">
                                    <label for="friendlist">好友列表</label>
                                    <div id="friendlist" style=" overflow-y:auto; overflow-x:auto; height:500px;">

                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="comfirmFriendCheck">确定所选</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </div>

        </div>
    </div>

</body>

</html>
